<header>
  <div class="left">
    <span [ngClass]="{on:!isCheckedYear}" (click)="onSearchMonth()">月度</span>
    <span [ngClass]="{on:isCheckedYear}" (click)="onSearchYear()">年度</span>

  </div>
  <div class="right">
    选择时间：
    <span>
      <!--<select #year (click)="onClickYear(year.value)">
        <option *ngFor="let year of years"> {{year}}</option>
      </select>-->
      <select class="year" [ngModel]="currentYear" (ngModelChange)="onChangeYear($event)">
        <option [value]="year" *ngFor="let year of years"> {{year}} </option>
      </select>
      年
    </span>
    <span [ngStyle]="{'display':!isCheckedYear ?'inline-block':'none'}">
      <!--<select #month (click)="onClickMonth(month.value)">
        <option *ngFor="let month of months"> {{month}}</option>
      </select>-->
      <select class="month" [ngModel]="currentMonth" (ngModelChange)=" onChangeMonth($event)">
        <option [value]="month" *ngFor="let month of months"> {{month}}</option>
      </select>
      月
    </span>
    <span>
      <button (click)="onSearch(currentYear,currentMonth)">查询</button>
    </span>
    <i class="exp">
      <a (click)="exportData()" id="ex">导出计划电量</a>
    </i>
  </div>
</header>
<main>
  <section>
    <p-table [columns]="cols" [value]="farmPlantpowers" selectionMode="single" [(selection)]="selectedfarmPlantpower" (onRowSelect)="onRowSelect($event)"
             (onRowUnselect)="onRowSelect($event)"
             [responsive]="true" dataKey="farmId">
      <ng-template pTemplate="header" let-columns>
        <tr class="data-columns">
          <th *ngFor="let col of columns">
            {{col.header}}
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-car let-columns="columns">
        <tr [pSelectableRow]="car">
          <td *ngFor="let col of columns">
            {{car[col.field]}}
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="footer">
        <div class="ui-helper-clearfix" style="width:100%;display: flex;">
          <button class="pButton" type="button" pButton icon="fa fa-plus" style="float:left" (click)="showDialogToAdd()"
                  label="增加">
          </button>
          <p-fileUpload [ngClass]="{'fileUpload-edit':!filePlant}" name="file" (uploadHandler)="onUploadPlant($event)"
                        (onRemove)="onRemovePlant()" cancelLabel="取消" chooseLabel="计划电量上传" customUpload="true" auto="false"
                        enctype="multipart/form-data"></p-fileUpload>
          <!-- <p-fileUpload [ngClass]="{'fileUpload-edit':!file}" name="file" (uploadHandler)="onUpload($event)" (onRemove)="onRemove()"
          cancelLabel="取消" chooseLabel="发电量上传" customUpload="true" auto="false" enctype="multipart/form-data"></p-fileUpload>
          <p-fileUpload [ngClass]="{'fileUpload-edit':!fileOther}" name="file" (uploadHandler)="onUploadOther($event)" (onRemove)="onRemoveOther()"
          cancelLabel="取消" chooseLabel="其他电量上传" customUpload="true" auto="false" enctype="multipart/form-data"></p-fileUpload> -->
        </div>
        <td></td>
        <td></td>
        <td></td>
      </ng-template>
    </p-table>

    <p-dialog header="计划电量详情" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" [draggable]="false">
      <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="farmPlantpower">
        <div class="ui-grid-row">
          <div class="ui-grid-col-7">
            <label for="farmName">风场</label>
          </div>
          <div class="ui-grid-col-5">
            <select class="farms" [(ngModel)]="selectFarmId">
              <option [value]="c.farmId" *ngFor="let c of farms">{{c.farmName}}</option>
            </select>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-7">
            <label for="datePlant">时间</label>
          </div>
          <div class="ui-grid-col-5">
            <!-- <p-calendar [(ngModel)]="farmPlantpower.datePlant"></p-calendar> -->
            <input pInputDate id="datePlant" readonly *ngIf="!newFarmPlantpower" [(ngModel)]="farmPlantpower.datePlant"/>
            <input pInputDate id="datePlant" readonly *ngIf="newFarmPlantpower" [(ngModel)]="farmPlantpower.datePlant"/>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-7">
            <label for="plantPower">计划发电量(kWh)</label>
          </div>
          <div class="ui-grid-col-5">
            <input pInputText id="plantPower" [(ngModel)]="farmPlantpower.plantPower"/>
          </div>
        </div>

        <div class="ui-grid-row">
          <div class="ui-grid-col-7">
            <label for="adjustPower">校准电量(kWh)</label>
          </div>
          <div class="ui-grid-col-5">
            <input pInputText id="adjustPower" [(ngModel)]="farmPlantpower.adjustPower"/>
          </div>
        </div>
      </div>
      <div *ngIf="index!=-1" style="color:red;text-align:center">风场已经存在！</div>
      <div *ngIf="datePlant == null" style="color:red;text-align:center">时间不能为空!</div>
      <p-footer>
        <div class="ui-dialog-buttonpane ui-helper-clearfix">
          <button type="button" pButton icon="fa fa-close" (click)="delete()" label="删除"></button>
          <button type="button" pButton icon="fa fa-check" (click)="save()" label="保存"></button>
        </div>
      </p-footer>
    </p-dialog>
  </section>
</main>
<p-confirmDialog header="Confirmation" width="300" acceptLabel="是" rejectLabel="否"></p-confirmDialog>
